<template>
  <div>
    <van-nav-bar
      title="市容顽症事件"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
     <div class="title">人员处置记录单</div>
    <div class="poweruser">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="事件详情" name="1">
          <van-cell-group>
            <van-field label="事件类型" value="输入框只读" v-model="eventype" readonly />
            <van-field label="发生时间" value="输入框只读" v-model="creatime" readonly />
          </van-cell-group>
        </van-collapse-item>
        <van-collapse-item title="人员信息" name="2">
           <van-cell-group>
            <!-- <van-field label="当事人姓名" value="输入框只读" readonly /> -->
            <van-field v-model="dutyUser.name" label="当事人姓名" placeholder="请输入名字" />
            <van-cell class="sex-name" title="性别">
              <van-radio-group v-model="dutyUser.gender"  >
                  <van-row>
                      <van-col span="12">
                          <van-radio name="1">男</van-radio>
                      </van-col>
                      <van-col span="12">
                          <van-radio name="0">女</van-radio>
                      </van-col>
                  </van-row>
              </van-radio-group>
            </van-cell>
            <van-field v-model="dutyUser.age" label="年龄" type="digit" placeholder="请输入年龄" />
            <van-field v-model="dutyUser.tel" label="联系方式" type="tel" placeholder="请输入联系方式" />
            <van-field v-model="dutyUser.company" label="责任单位" type="text" placeholder="请输入单位名称" />
            <van-field v-model="dutyUser.address" label="联系地址" type="text" placeholder="请输入联系地址" />
            <van-cell title="当事人照片" icon="photo-o" />
              <div class="uploadbox">
                 <van-uploader
                  v-model="uploader"
                  :after-read="afterRead"
                  :before-delete="picDelete"
                  :before-read="beforeRead"
                  multiple
                  :max-count="6"
                />
              </div>
          </van-cell-group>
        </van-collapse-item>
        <van-collapse-item title="处置信息" name="3">
          <van-field v-model="dutyUser.handler" label="检察人员" placeholder="请输入检察人员信息" />
          <van-field
            v-model="dutyUser.handleInfo"
            rows="2"
            autosize
            label="检查情况描述"
            type="textarea"
            maxlength="100"
            placeholder="请输入详细情况"
            show-word-limit
          />
          <van-radio-group  class="rectification-status" v-model="dutyUser.modifyType" @change="status" direction="vertical">
            <van-radio name="1" @click="handeStatus('1')">立即整改</van-radio>
            <van-radio name="2" @click="handeStatus('2')">限期整改</van-radio>
          </van-radio-group>
          <van-cell v-show="limitime" class="rectification-time" title="限期截止日期">
            <div class="limitime-box" :value="date"  @click="show = true" >
              <span class="limitime-date">{{dutyUser.modifyEndTime}}</span>
              <span class="limitime-icon"></span>
            </div>
          </van-cell>
          <van-field
            v-show="limitime"
            v-model="dutyUser.modifyContent"
            rows="2"
            autosize
            label="限期整改内容"
            type="textarea"
            maxlength="100"
            placeholder="请输入详细情况"
            show-word-limit
          />
      </van-collapse-item>
      </van-collapse>
      <van-calendar v-model="show" @confirm="onConfirm" />
      <div class="goindex">
        <van-button
          class="goindex-back"
          round
          type="info"
          color="#F57665"
          block
          @click="goindexhandleBack"
          >取消</van-button
        >
        <van-button
          class="goindex-back"
          round
          type="primary"
          block
          @click="Dialog"
          >提交</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import  { compressImage } from '../../../../config/compressImage';
import { workToUser,personLoad,aiLoad,sendCardMsg,uploadPic } from '../../../../utils/api';
export default {
  name: "chengguanEvents",
  data() {
    return {
      activeNames: ["1","2","3"],
      // radio: -1,
      eventype:'',
      creatime:'',
      dutyUser:{
        name:'',
        gender:'',
        age:'',
        tel:'',
        company:'',
        address:'',
        imageUrls:[],
        handler:'',
        handleInfo:'',
        modifyType:'',
        modifyEndTime:'',
        modifyContent:''
      },
      uploader: [],
      submitPic:[],
      limitime:false,
      date: '',
      show: false,
      dateShow:false,
      lists:{}
    };
  },
  mounted() {
    if(this.$route.query.region == 'person'){
      this.getPerson(this.$route.query.id);
    }else{
      this.getAi(this.$route.query.id)
    }
    this.addDate()
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/" });
    },
    itemhandle() {
      this.popupshow = true;
    },
    //获取当前年月日
    addDate(){
      const nowDate = new Date();
      const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
      }
      const newmonth = date.month>10?date.month:'0'+date.month
      const day = date.date>10?date.date:'0'+date.date
      this.updateTime = date.year + '-' + newmonth + '-' + day
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.updateTime = this.formatDate(date);
    },
    goindexhandleBack() {
      this.$router.push({ path: "/" });
    },
    Dialog(){
      const that = this
        that.$dialog.confirm({
        // title: '标题',
        message: '是否确认提交',
      })
      .then(() => {
        if (!that.uploader.length) {
          Toast('请上传照片');
          return
        }
        // on confirm
        //消息卡片推送网格
        let evenTitle = that.lists.eventType == '0'?'建筑垃圾偷盗':(that.lists.eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
        let region = this.$route.query.regions == '人工上报'?'person':'ai';
         let descriptions = '发现时间:'+ this.lists.createTime +'<br>事件地址:'+this.lists.eventAddr +'<br>事件方式:'+region;
        let Url = 'http://211.136.107.159:8081/lxm_app/'
        let params = {
          textCard:{
            title:evenTitle+'事件监管到人，请结案',
            description:descriptions,
            url:Url+'m_index.html#/workingEventsMain/messageCard/gridEvents?id='+ this.lists.id +'&regin='+ this.$route.query.regions +''
          },
          ownerGrid:this.lists.ownerGrid
        }
        sendCardMsg(params).then((res)=>{
          if(res.code === 200){
            Toast.success(res.message)
          }else{
            Toast.fail(res.message)
          }
          this.getInput();
        })
      })
    },
    status(event){
      if(event === '2'){
        this.limitime = true
      }else{
        this.limitime = false
      }
    },
    //提交
    getInput () {
      this.dutyUser.imageUrls = this.submitPic
      let param = {
        id:this.lists.id,
        dutyUser:this.dutyUser
      }
      workToUser(param).then(res=>{
        if(res.code === 200){
          Toast.success(res.message)
        }else{
          Toast.fail(res.message)
        }
        that.$router.push({ name: "chengguanCase",params:{dutyUser:that.dutyUser,eventype:that.eventype,creatime:that.creatime}});
      })
    },
    //图片上传前判断图片格式
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg" &&
        file.type !== "image/bmp" &&
        file.type !== "image/tif" &&
        file.type !== "image/gif" &&
        file.type !== "image/pcx" &&
        file.type !== "image/tga"
      ) {
        this.$toast.fail({
          message: "只可上传图片格式的文件"
        });
        return false;
      }
      return true;
    },
    //图片压缩
    afterRead(file) {
      this.ImageCompression(file)
    },
    //图片删除tab
    picDelete(file){
      const that = this
      for(let i=0;i<that.submitPic.length;i++){
        if (that.submitPic[i].picName === file.file.name) {
            that.submitPic.splice(i, 1);
            that.uploader.splice(i, 1);
          }
      }
    },
    //图片压缩
    ImageCompression(file){
      compressImage(file.content).then(result => {
        if (result.size > file.file.size) {
          //压缩后比原来更大，则将原图上传
          this.uploadFile(file.file, file.file.name, file);
        } else {
          //压缩后比原来小，上传压缩后的
          this.uploadFile(result, file.file.name, file);
        }
      });
    },
     //图片上传
    uploadFile(file, filename, files){
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
　　  formData.append('file', file,filename);
      uploadPic(formData).then((res) => {
        if (res.code === 200) {
          res.data['picName'] = filename;
          this.submitPic.push(res.data)
        }
      })
    },
    //人工事件查询
    getPerson(param){
      personLoad({id:param}).then(res=>{
        if(res.code === 200){
          this.lists = res.data;
          this.creatime = this.lists.createTime;
          this.eventype = this.lists.eventType == '2'?'垃圾溢满':(this.lists.eventType == '1'?'小包垃圾丢弃':'建筑垃圾偷盗');
        }else{
          Toast.fail(res.message)
        }
      })
    },
    //ai事件查询
    getAi(param){
      aiLoad(param).then(res=>{
        if(res.code === 200){
          this.lists = res.data;
          this.creatime = this.lists.createTime;
          this.eventype = this.lists.eventType == '2'?'垃圾溢满':(this.lists.eventType == '1'?'小包垃圾丢弃':'建筑垃圾偷盗');
        }else{
          Toast.fail(res.message)
        }
      })
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-top: 11%;
}

.grid-item {
  width: 100%;
  padding: 15px 0px;
  border-bottom: 1px #f5f5f5 solid;
}
.grid-item b {
  padding-right: 40px;
  padding-left: 10px;
}
.grid-item span {
  color: #6e6e6e;
  font-weight: bold;
}
.grid-item:last-child {
  border: none;
}
.func {
  width: 75%;
  margin: auto;
  text-align: center;
}

.func .func-t {
  font-size: 15px;
  font-weight: bold;
}
.func .qxgl {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .xxxg {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .del {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #f57665;
}
.func .cancel {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #999999;
}
.changeform {
  margin-top: 10px;
}
.dform {
  width: 90%;
  margin: 10px auto;
}
.cformt {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}
.sex-name .van-cell__title{
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 90px;
}
.rectification-status{
  width: 100%;
  height: 40px;
  display: flex;
  position: relative;
}
.rectification-status:after{
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.rectification-status .van-radio{
  padding-right: 10px;
  margin-left: 20px;
}
.rectification-time .van-cell__title{
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 90px;
}
.limitime-box{
  width: 100%;
  height: 100%;
  display: flex;
  padding-left: 10%;
}
.limitime-icon{
  width: 15px;
  height: 15px;
  margin-top: 4px;
  margin-left: 4px;
  background-image: url('../../../../assets/img/workingEvents/icon-date.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.goindex {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.goindex-back{
  width: 40%;
}
</style>
